<template>
  <div class="app">
    <h2>我是App</h2>
    <h4>学校名(直接去编写)：{{school.toUpperCase()}}</h4>
    <h4>学校名(methods写)：{{getUpperSchool()}}</h4>
    <h4>学校名(computed写)：{{school2}}</h4>
    <h4>学校名(过滤器去写)：{{school | upper | cut(4)}}</h4>
    <Child/>
  </div>
</template>

<script>
  import Child from './components/Child.vue'
  export default {
    name: 'App',
    components:{Child},
    data() {
      return {
        school:'atguigu',
        address:'北京宏福科技园'
      }
    },
    methods: {
      getUpperSchool(){
        return this.school.toUpperCase()
      }
    },
    computed:{
      school2(){
        return this.school.toUpperCase()
      }
    },
    filters:{
      /* 
        1.upper何时调用？ —— 有人使用该过滤器的时，用一次调一次
        2.upper中的this是谁？—— 爱谁谁，反正不是vc
        3.upper收到哪些参数？—— 管道符左侧表达式的执行结果
        4.upper是否需要写返回值？—— 必须写，返回值就是呈现到页面上的内容
      */
      /* upper(value){
        console.log('@',this,value)
        return value.toUpperCase()
      }, */
      cut(value,n){
        return value.slice(0,n)
      }
    }
  }
</script>

<style>
  .app {
    background-color: gray;
    border-radius: 10px;
    padding: 20px;
  }
</style>